<template>
	<view class="shouyi">
		<view class="top">
			<view class="topbox">
				<view class="con">
					<view class="item">
						<view class="con1">{{ userinfo.today_earning | capitalize }}</view>
						<view class="text">今日收益</view>
					</view>
					<view class="item">
						<view class="con1">{{ userinfo.total_ordernum | capitalize1 }}</view>
						<view class="text">累计订单</view>
					</view>
					<view class="item">
						<view class="con1">{{ userinfo.total_earning | capitalize }}</view>
						<view class="text">累计收益</view>
					</view>
					<!-- 累计收益 <text>{{userinfo.total_earning|capitalize}}</text> -->
				</view>
			</view>
		</view>
		<view class="bottom">
			<view class="title">
				<view>收益金额：<text class="heji">{{money}}</text>元</view>
				<view class="date" @tap="flag=!flag">
					<text>时间</text>
					<image src="../../../static/images/icon/sai.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="saicon" v-if="flag">
				<view class="top1">
					<view class="data">
						<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
							<view class="uni-input">{{ date }}</view>
						</picker>
					</view>
					<view class="data">
						<picker mode="date" :value="date1" :start="startDate" :end="endDate" @change="bindDateChange1">
							<view class="uni-input">{{ date1 }}</view>
						</picker>
					</view>
				</view>
				<view class="bottom1">
					<view @tap="search">搜索</view>
				</view>
				
			</view>
			<view class="content">
				<view class="item" v-for="(item, index) in List" :key="index">
					<view class="left">
						收益
						<text>+{{ item['jine'] }}</text>
					</view>
					<view class="right">{{ item['shijian'] }}</view>
				</view>
			</view>
			<view class="wu" v-if="!List">
				暂无记录
			</view>
		</view>
		<tui-loadmore :visible="loadding" :index="3" type="primary"></tui-loadmore>
		<tui-nomore :visible="!pullUpOn" bgcolor="#f2f2f2"></tui-nomore>
	</view>
</template>

<script>
import { mapState } from 'vuex';
import tuiIcon from '@/components/icon/icon';
import tuiLoadmore from '@/components/loadmore/loadmore';
import tuiNomore from '@/components/nomore/nomore';
export default {
	data() {
		return {
			pageIndex: 1,
			loadding: false,
			pullUpOn: true,
			List: [],
			date: '开始日期',
			date1: '结束日期',
			flag:false,
			money:""
		};
	},
	components: {
		tuiIcon,
		tuiLoadmore,
		tuiNomore
	},

	methods: {
		bindDateChange: function(e) {
			this.date = e.target.value;
		},
		bindDateChange1: function(e) {
			this.date1 = e.target.value;
		},
		search(){
			if (this.date != "开始日期" && this.date1 != "结束日期") {
				this.pageIndex = 1;
				var data = {
					token: uni.getStorageSync('token'),
					lb: 6,
					page: 1,
					startTime: this.date,
					endTime: this.date1,
				};
				this.$store.dispatch('shouyi', data).then(res => {
					this.flag = false;
					this.List = res.data.data.data;
					this.money= res.data.data.total;
					uni.showToast({
						title: res.data.msg,
						icon: "none"
					})
				});
			}
			else{
				uni.showToast({
					title: '请选择开始和结束日期',
					icon: "none"
				})
			}
			
		},
		getDate(type) {
			const date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let day = date.getDate();
		
			if (type === 'start') {
				year = year - 60;
			} else if (type === 'end') {
				year = year + 2;
			}
			month = month > 9 ? month : '0' + month;
			day = day > 9 ? day : '0' + day;
			return `${year}-${month}-${day}`;
		}
	},
	filters: {
		capitalize: function(value) {
			if (value != null) {
				var chazhi = 0;
				chazhi = parseFloat(value).toFixed(2);
				return chazhi;
			} else {
				return 0.0;
			}
		},
		capitalize1: function(value) {
			if (value != null) {
				var chazhi = 0;
				chazhi = parseFloat(value).toFixed(0);
				return chazhi;
			} else {
				return 0;
			}
		
		}
	},
	// 页面上拉触底事件的处理函数
	onReachBottom: function() {
		if (!this.pullUpOn) return;
		this.loadding = true;

		if (this.List.length >= this.shouyi.count) {
			this.loadding = false;
			this.pullUpOn = false;
		} else {
			this.pageIndex = this.pageIndex + 1;
				if (this.date != "开始日期" && this.date1 != "结束日期") {
						var data = {
						token: uni.getStorageSync('token'),
						lb: 6,
						page: this.pageIndex,
						startTime: this.date,
						endTime: this.date1
					};
					this.$store.dispatch('shouyi', data).then(res => {
						this.shouyi.data.forEach((val, index) => {
							this.List.push(val);
						});
					
						this.loadding = false;
					});	
				}
				else{
				var data = {
					token: uni.getStorageSync('token'),
					lb: 6,
					page: this.pageIndex
				};
				this.$store.dispatch('shouyi', data).then(res => {
					this.shouyi.data.forEach((val, index) => {
						this.List.push(val);
					});
				
					this.loadding = false;
				});	
				}
			
		}
	},
	computed: {
		...mapState([
			"userinfo",
			"shouyi"
		]),
		startDate() {
			return this.getDate('start');
		},
		endDate() {
			return this.getDate('end');
		}
	
	},
	onLoad: function() {
		this.pageIndex = 1;
		var data = {
			token: uni.getStorageSync('token'),
			lb: 6,
			page: 1
		};
		this.$store.dispatch('shouyi', data).then(res => {
			this.List = res.data.data.data;
			this.money= res.data.data.total;
		});
	}
};
</script>
<style lang="scss" scoped src="./index.scss"></style>

